<template>
  <div v-loading="setLoading" element-loading-text="拼命加载中">
    <div class="settings-thumb">
      <i class="iconfont icon-qingsao i-icon color-primary"></i>
      <h2 class="settings-name">撤销入住</h2>
      <el-button v-if="changeSet" class="right-button" type="success" size="mini" icon="el-icon-check" @click="dataFormSubmit" circle></el-button>
      <el-button v-if="changeSet" class="right-button" type="danger" size="mini" icon="el-icon-close" @click="cancle" circle></el-button>
    </div>
    <div class="settings-intro">
      <div class="settings-description">
        <span>
          <el-form label-width="80px">
            <el-form-item label="撤销开关">
              <el-switch v-model="seller.state" @change="checkChange" :active-value="1" :inactive-value="0"
                active-text="已开" class="switch" inactive-text="已关"></el-switch>
            </el-form-item>
            <el-form-item label="有效分钟">
              <el-input-number style="margin-right: 5px;" @change="checkChange" v-model="seller.minute" size="mini" :step="10"
                :min="0"></el-input-number> 内可撤
            </el-form-item>
          </el-form>
        </span>
      </div>
      <!--<div class="settings-button">
        <a class="f14 color-blue" href="javascript:;">按钮</a>
      </div> -->
      <div id="printOperateController"></div>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        setLoading: false,
        changeSet:false,
        seller: {
          id: 0,
          sellerId: '',
          state: 1,
          minute: 0
        },
      }
    },
    activated() {
      this.init()
    },
    methods: {
      cancle(){
        this.init()
        this.changeSet = false;
      },
      checkChange() {
        if(!this.changeSet){
          this.changeSet = true;
        }
      },
      dataFormSubmit(){
        this.setLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelcancellation/${!this.seller.id ? 'save' : 'update'}`),
          method: 'post',
          data: this.$http.adornData({
            'id': this.seller.id || undefined,
            'state': this.seller.state,
            'minute': this.seller.minute
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.changeSet = false;
            this.init();
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
            })
          }else{
            this.$message.error(data.msg)
          }
          this.setLoading = false;
        })
      },
      init() {
        this.setLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelcancellation/seller`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.seller = data.entity
          }
          this.setLoading = false;
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .el-form {
    // .el-form-item {
    //   margin-bottom: 0px;
    // }
    .el-input-number{
      width: 110px;
    }
  }
  .right-button{
    padding: 5px;
  }
  .right-button+.right-button{
    margin-left: 0px;
  }
</style>
